<style>
    #erupt-features {
        transition: all .6s;
        border-radius: 6px;
        position: relative;
        background: #fff;
    }

    .card {
        margin-bottom: 12px;
    }

    .card-item {
        box-sizing: border-box;
        cursor: pointer;
        padding: 36px 16px;
        border-right: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
    }

    .card-item:hover {
        transition: all .3s;
        box-shadow: inset 0 0 30px rgba(0, 0, 0, .06);
    }

    .indicator-card {
        box-sizing: border-box;
        padding: 18px;
        background: rgba(255, 255, 255, 0.8);
        text-align: center;
        border-radius: 6px;
        box-shadow: 0 0 4px #eeeeee;
        margin-bottom: 26px;
        border: 1px solid #eee;
        transition: all 600ms;
    }

    .indicator-card .desc {
        font-size: .95em;
        text-align: left;
        margin-bottom: 0;
        color: #666;
        height: 55px;
        overflow: auto;
        border-top: 1px dashed #9E9E9E;
        padding-top: 10px;
    }

    .indicator-card:hover {
        box-shadow: 0 26px 40px -14px rgba(0, 36, 100, 0.3);
    }

    .indicator-card:hover img {
        transition: all 600ms;
        transform: scale(1.1);
    }

    .deg90 {
        transform: rotate(-90deg);
    }

    @keyframes del-line {
        0% {
            text-decoration: none;
        }

        100% {
            text-decoration: line-through;
            text-decoration-color: #f00;
            text-decoration-style: dashed;
        }
    }

    .del-line {
        /*animation: del-line 2s forwards;*/
        text-decoration: line-through;
        text-decoration-color: #f00;
        text-decoration-style: dashed;
    }

    #header {
        animation: header-in 900ms;
    }

    @keyframes header-in {
        0% {
            transform: translateY(-50px);
        }

        100% {
            transform: translateY(0);
        }
    }

    .git-name {
        margin-bottom: 0;
        margin-top: 16px;
        font-size: 1.3em;
    }

    #main {
        margin-top: 0;
    }

    #header {
        background: none;
        border-bottom: 0;
        color: #fff;
        background: rgba(39, 38, 43, 0.99);
    }

    #header a {
        color: #aaa;
    }

    #header .active-link {
        color: #fff !important;
    }

    .git-card {
        cursor: pointer;
        transition: all 600ms;
    }

    .git-card img {
        transition: all 600ms;
    }

    .git-card:hover {
        background: rgba(52, 58, 64, 0.70);
        color: #fff;
        box-shadow: 0 18px 20px -14px rgba(0, 36, 100, 0.3);
    }

    .git-card:hover .git-img {
        transform: scale(.9);
    }

    .mark-title {
        font-size: 1.2em;
        font-weight: 500;
        border-left: 6px solid #09f;
        padding-left: 12px;
        font-family: initial;
        letter-spacing: 5px;
    }

    .table-vs tr:hover {
        background: rgba(122, 186, 255);
    }

    .table-vs tr th {
        border: none;
    }

    .table-vs tr td:nth-child(2) {
        text-align: center;
    }

    .table-vs tr td:nth-child(1) {
        text-align: right;
    }

    .position-fill {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    @keyframes skew-up {
        100% {
            top: 350px
        }
    }
</style>
<div ng-controller="home">
    <div>
        <div style="background: #27262b url(images/tile.png);">
            <div style="padding-top: 60px">
                <div class="text-center" style="color: #fff">
                    <div style="margin-top: 60px;text-align: center">
                        <span id="home-logo">
                            <img alt="" src="assets/logo2.svg" width="120px">
                        </span>
                    </div>
                    <h1 style="margin-top: 30px">Erupt Framework</h1>
                    <h4 style="margin-top: 18px">使用<span style="color: #ffc107;"> 注解 </span>快速开发管理后台 🚀</h4>
                    <p style="margin-top: 26px">
                        <button class="btn btn-primary" ng-click="go('#!/contrast')">代码示例
                        </button>
                        &nbsp;&nbsp;
                        <button class="btn btn-success" ng-click="go('#!/doc')">开始使用
                        </button>
                        &nbsp;&nbsp;
                        <button class="btn btn-danger" ng-click="go('https://www.erupt.xyz/demo',true)">演示DEMO
                        </button>
                    </p>
                </div>
            </div>
            <div style="position: relative">
                <div id="skew-bg" style="position: absolute;
                            top: 350px;left: 0;right: 0;bottom: -500px;background: #09f;
                            transform: skewY(-10deg);transform-origin: 0 50%;
                            transition:all 400ms;box-shadow: 5px -5px 20px 0 #000000">
                </div>
                <div class="container" style="margin-top: 60px;padding-bottom: 20px;">
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex animated fadeInUpBig bg-dark"
                                 style="overflow: hidden;border-radius: 6px;box-shadow: 0 10px 20px #080808a6">
                                <div style="width: 200px;flex-shrink:0;background:#3c3f41;color: #bbbbbb;overflow: auto">
                                    <div class="align-items-center"
                                         style="margin-top: 12px;border-bottom: 1px dashed #bbbbbb;">
                                        <p style="margin-bottom: 8px;text-align: center;">后台开发仅需一个类文件</p>
                                    </div>
                                    <div class="align-items-center" ng-repeat="(key,val) in project"
                                         style="margin-top: 12px;padding: 0 12px;">
                                        <p>
                                            <img alt="" ng-class="val.sub||'deg90'" src="images/file/below.svg"
                                                 width="8px">
                                            <img alt="" src="images/file/finder.svg" style="width: 18px;">
                                            <span ng-class="val.active||'del-line'"
                                                  ng-style="{animationDelay:($index*400)+'ms'}">{{key}}</span>
                                        </p>
                                        <div ng-if="val.sub">
                                            <div class="align-items-center" ng-repeat="(key,val) in val.sub"
                                                 style="padding-left: 32px;margin-top: 12px">
                                                <div ng-if="val.file">
                                                    <img alt="" src="images/file/file.svg" style="width: 18px">
                                                    <span ng-class="val.active||'del-line'"
                                                          ng-style="{color:val.active&&'#FFEB3B'}">{{key}}</span>
                                                </div>
                                                <div ng-if="!val.file">
                                                    <img alt="" ng-class="val.sub||'deg90'" src="images/file/below.svg"
                                                         width="8px">
                                                    <img alt="" src="images/file/finder.svg" style="width: 18px">
                                                    <span class="del-line">{{key}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="width: 100%;overflow: auto;position: relative">
                                <pre id="DemoErupt"
                                     style="margin: 0;border-radius:0;height: 562px;box-shadow: inset 0 0 10px #2310109e">
<code class="prism language-java animated bounce">/**
  *  无需多层代码，仅需一个类文件开发管理后台 🚀
  *  完全不需要了解 Vue / Angular / React / Jquery，
  *  而且不需要了解 JavaScript / HTML / CSS
  *  甚至不需要了解 Spring MVC / JPA / Mybatis / SQL
  *  即便没学过 erupt 也能猜到大部分配置的作用，只需要简单配置就能完成所有后台页面开发。
  *  @Erupt = template + controller + service + dao + xml + entity + ddl
  *  简化了 90% 的后台开发流程，解除被 CURD 支配的恐惧，专注核心业务。改需求？没关系！可能加减几行注解就能搞定 😆
  */
@Table
@Entity
@Erupt(name = "Hello World")
public class DemoErupt extends BaseModel {

    @EruptField(
            views = @View(title = "文本"),
            edit = @Edit(title = "文本", notNull = true, search = @Search)
    )
    private String input;

    @EruptField(
            views = @View(title = "数值", sortable = true),
            edit = @Edit(title = "数值", search = @Search)
    )
    private Float number;

    @EruptField(
            views = @View(title = "时间"),
            edit = @Edit(title = "时间", search = @Search(vague = true))
    )
    private Date date;

}</code></pre>
                                    <a class="badge badge-primary" href="#!/contrast"
                                       style="position: absolute;right: 16px;bottom: 16px;font-family: initial">
                                        更多示例 →
                                    </a>
                                </div>
                                <div class="d-none d-md-block" style="color: #fff;height: 100%;width: 210px;
                                 margin:16px 22px;
                                 overflow: auto;flex-shrink: 0">
                                    <div class="animated bounceInLeft code-tip delay-1">
                                        <h5 class="text-primary">零前端代码</h5>
                                        <p class="text-white">不需要懂前端，开发专业且强大的管理后台</p>
                                        <hr>
                                    </div>
                                    <div class="animated bounceInLeft code-tip delay-2">
                                        <h5 class="text-warning">易于上手</h5>
                                        <p class="text-white">仅需了解 Spring Boot 基础知识即可上手开发</p>
                                        <hr>
                                    </div>
                                    <div class="animated bounceInLeft code-tip delay-3">
                                        <h5 class="text-success">安全可靠</h5>
                                        <p class="text-white">细颗粒全方位安全检查，持续保证数据安全</p>
                                        <hr>
                                    </div>
                                    <div class="animated bounceInLeft code-tip delay-4">
                                        <h5 class="text-danger">通用数据管理</h5>
                                        <p class="text-white">支持市面上所有主流数据库，支持自定义数据源</p>
                                        <hr>
                                    </div>
                                    <div class="animated bounceInLeft code-tip delay-5">
                                        <h5 class="text-info">表结构自动生成</h5>
                                        <p class="text-white mb-0">无需手动建表，不懂SQL也能操作数据库</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="erupt-features">
            <div style="margin-top: 30px;padding:16px 0;background: #fff">
                <div class="container">
                    <div class="row" style="margin-top: 16px">
                        <div class="col-12">
                            <div style="margin-bottom: 26px;font-size: 1.6em;text-align: center">
                                Erupt 使用 <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>
                                协议，源代码完全开源，无商业限制。 开源不易感谢 Star 👇
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="card git-card">
                                <div style="position: absolute;left: 10px;top: 10px">
                                    <img alt="" src="https://gitee.com/erupt/erupt/badge/star.svg?theme=dark">
                                </div>
                                <div class="card-body" ng-click="go('https://gitee.com/erupt/erupt',true)">
                                    <div class="text-center">
                                        <img alt="" class="git-img" src="images/gitee.svg" style="width: 70px">
                                        <p class="git-name">码云</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="card git-card">
                                <div style="position: absolute;right: 10px;top: 10px">
                                    <img alt="" src="https://img.shields.io/github/stars/erupts/erupt?style=social">
                                </div>
                                <div class="card-body" ng-click="go('https://github.com/erupts/erupt',true)">
                                    <div class="text-center">
                                        <img alt="" class="git-img" src="images/github.svg" style="width: 70px">
                                        <p class="git-name">github</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="background: #38404e url(images/tile.png) 0 0 repeat fixed;padding:36px;position: relative">
                <div class="container">
                    <table class="table table-bordered table-vs" style="color: #fff;margin-bottom: 0">
                        <tr>
                            <th style="width: 45%;text-align: right">代码生成器</th>
                            <th class="text-warning" style="width: 10%;text-align: center">VS</th>
                            <th style="width: 45%;text-align: left">Erupt</th>
                        </tr>
                        <tr>
                            <td>前端 + 后端 7 ~ 10 个文件</td>
                            <td>文件数量</td>
                            <td>仅需一个类文件</td>
                        </tr>
                        <tr>
                            <td>重新生成代码或修改已生成代码</td>
                            <td>修改字段</td>
                            <td>添加字段注解</td>
                        </tr>
                        <tr>
                            <td>需要手动执行建表 SQL</td>
                            <td>建表语句</td>
                            <td>自动建表</td>
                        </tr>
                        <tr>
                            <td>需要整个工程，模块众多不好管理</td>
                            <td>初次部署</td>
                            <td>仅需引入 Jar 依赖即可，基础数据自动生成</td>
                        </tr>

                        <tr>
                            <td>需要熟悉代码生成器所提供的前端 API，有一定学习成本</td>
                            <td>前端代码</td>
                            <td>零前端代码</td>
                        </tr>
                        <tr>
                            <td>传统分层调用的方式开发</td>
                            <td>开发方式</td>
                            <td>全注解式开发</td>
                        </tr>
                        <tr>
                            <td>仅支持基本的数据组件复杂的组件需自定义</td>
                            <td>组件支持</td>
                            <td>支持23类表单组件，且支持一对多，多对多等复杂关系组件</td>
                        </tr>
                        <tr>
                            <td>一般只支持 MySQL</td>
                            <td>数据库</td>
                            <td>支持 MySQL、Oracle、PostgreSQL、H2 等所有主流数据库</td>
                        </tr>
                        <tr>
                            <td>初期开发成本较低，后期字段修改时有一定开发成本且枯燥</td>
                            <td>开发时间</td>
                            <td>仅需一个后端工程师，几天就可以搞定高质量后台管理系统</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div style="position: relative;box-shadow:0 0 10px #9e9e9e36;padding-top: 20px;background: #fff">
                <div class="container">
                    <p class="mark-title">特性一览</p>
                    <div class="row">
                        <div class="col-md-4 col-6" ng-repeat="i in indicator">
                            <div class="indicator-card" ng-click="i.url && go(i.url,true)"
                                 ng-style="{animation: 'bounceInUp {{$index+1}}s'}" style="cursor: pointer">
                                <img alt="" ng-src="images/home/{{i.icon}}" style="height:120px">
                                <p ng-class="i.url?'text-primary':''"
                                   style="margin-top: 22px;margin-bottom: 10px;font-size: 1.2em;color: #333">
                                    {{i.name}}</p>
                                <p class="desc">{{i.desc}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="padding-top: 26px;background: #fff;margin-bottom: 26px">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card border-dark">
                                <div class="card-header bg-dark text-white text-center">
                                    表单支持（{{types.length}}类）
                                    <a class="float-right" href="https://www.yuque.com/yuepeng/erupt/cqgoo9"
                                       style="font-size:1em;color: #fff" target="_blank">
                                        <img alt="" height="20px" src="images/home/right.svg">
                                    </a>
                                </div>
                                <div class="row" style="margin-left: 0;margin-right: 0;height: 530px;overflow: auto">
                                    <div class="text-center col-sm-3 col-4 card-item" ng-repeat="type in types">
                                        <!--                            <p>{{type.code}}</p>-->
                                        <img ng-src="images/component/{{type.image}}" style="max-width: 33px;">
                                        <p style="font-size: .9em;margin-bottom: 0;color: #666;
                            margin-top: 22px">{{type.name}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white text-center">
                                    数据展示（{{viewTypes.length}}种）
                                    <a class="float-right" href="https://www.yuque.com/yuepeng/erupt/gec455#JtYTf"
                                       style="font-size:1em;color: #fff" target="_blank">
                                        <img alt="" height="20px" src="images/home/right.svg">
                                    </a>
                                </div>
                                <div class="row" style="margin-left: 0;margin-right: 0;height: 530px;overflow: auto">
                                    <div class="text-center col-lg-6 col-4 card-item"
                                         ng-repeat="type in viewTypes">
                                        <!--                            <p>{{type.code}}</p>-->
                                        <img ng-src="images/view/{{type.image}}" style="max-width: 33px;">
                                        <p style="font-size: .9em;margin-bottom: 0;color: #666;
                            margin-top: 22px">{{type.name}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="background: #fff;box-shadow: 0 0 10px #9e9e9e36;padding: 20px 0">
                <div class="container">
                    <div class="card">
                        <div class="card-header bg-danger text-white">
                            数据源支持
                            <a class="float-right" href="https://www.yuque.com/yuepeng/erupt/gec455#JtYTf"
                               style="font-size:1em;color: #fff" target="_blank">
                                <img alt="" height="20px" src="images/home/right.svg">
                            </a>
                        </div>
                        <div class="row" style="margin-left: 0;margin-right: 0">
                            <div class="card-item col-lg-2 col-md-4 col-4" ng-repeat="db in dbs"
                                 style="padding: 16px">
                                <div style="padding: 16px;text-align: center">
                                    <img alt="db.name" ng-src="images/db/{{db.image}}" style="max-width: 80px">
                                </div>
                                <p class="text-center" style="margin-bottom: 0;margin-top: 8px">{{db.name}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
